<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>间隔柱状</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts.min.js"></script>
			<script src="./static/js/jquery.min.js"></script>
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {
				    
				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
				}
			</style>
		</head>
		<body>
			<div id="main"></div>
			<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		
		-->
			<script>
				let BeginSize = [200, 186];
				let myChart = null;
				let myColor = ['#F1644E', '#E58C51', '#FFEC8A', '#63FFCA', '#01ECFF', '#3E98FF']
				let data = [{
						name: '青菜',
						value: 4.0,
						growth:'4%',
					}, {
						name: '芹菜',
						value: 3.0,
						growth:'2%',
					}, {
						name: '冬瓜',
						value: 42.5,
						growth:'42%',
					},
					{
						name: '大白菜',
						value: 1.8,
						growth:'2%',
					}, {
						name: '圆白菜',
						value: 1.8,
						growth:'2%',
					}, {
						name: '花菜',
						value: 1.8,
						growth:'2%',
					}, {
						name: '白萝卜',
						value: 1.8,
						growth:'2%',
					}
				];
				let path = ['up','up','up','down','down','up','down']
				

				function fresh() {
					let getArrByKey=(data, k) => {
						let key = k || "value";
						let res = [];
						if (data) {
							data.forEach(function(t) {
								res.push(t[key]);
							});
						}
						return res;
					};
					const weatherIcons = {
					  down: 'https://z3.ax1x.com/2021/11/24/oCyhMq.png',
					  up: 'https://z3.ax1x.com/2021/11/24/oCyTdU.png'
					};
					let option = {
						backgroundColor:'rgba(13,29,70,0.75)',
						// title:{
						// 	text:'单位：元/公斤',
						// 	textStyle:{
						// 		color:'#FFFFFF',
						// 		fontSize:12
						// 	},
						// 	top:5,
						// 	right:20
						// },
						grid: {
							top: '6%',
							bottom: '0%',
							right: '20%',
							// left: '2',
							width:'90%',
							containLabel: true
						},
						xAxis: {
							show: false,
							
							// max:6,
						},
						yAxis: [{
							triggerEvent: true,
							show: true,
							inverse: true,
							data: getArrByKey(data, 'name'),
							
							axisLine: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisTick: {
								show: false
							},

							axisLabel: {
								show: true,
								interval: 0,
								color: '#FFFFFF',
								align: 'left',
								margin: 60,
								formatter: function(value, index) {
									return '{title|' + value + '}'
								},
								rich: {
									title: {
										width: 50,
										align: 'right',
										fontSize: 13
									}
								}
							},
						}, {
							triggerEvent: true,
							show: true,
							inverse: true,
							data: getArrByKey(data, 'name'),
							axisLine: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								interval: 0,
								shadowOffsetX: '-20px',
								color: '#FFFFFF',
								align: 'left',
								verticalAlign: 'center',
								lineHeight: 40,
								fontSize: 13,
								padding:[0 ,10,0 ,0],
								formatter: function(value, index) {
									let p;
									if(path[index]=='up'){
										p='a'
									}else{
										p='b'
									}
									return '{aaa|'+Number(data[index].value).toFixed(1)+'}'+'' +'{'+path[index]+ '| }'+'{'+p+'|'+ data[index].growth+'}'
								},
								rich: {
										aaa:{
											width:50,
										},
										down: {
											
											backgroundColor:{
												image: weatherIcons.down
											}											 
										},
										up: {
											backgroundColor:{
												image: weatherIcons.up
											}											 
										},
										a:{
											color: '#32EDAA',
											fontSize:12
										},
										b:{
											color: '#F63939',
											fontSize:12,
										}									
								}
							}
						}],
						series: [
							{
							name: '条',
							type: 'bar',
							z: 12,
							// showBackground: true,
							yAxisIndex: 0,
							data: [0,0,0,0,0,0,0],
							barWidth: 20,
							itemStyle: {
								normal: {
									color: "rgba(41, 162, 245, 1)",
									barBorderRadius: [3, 3, 3, 3]
								},

							},

						}]

					};
					myChart = echarts.init(document.getElementById('main'));
					myChart.setOption(option);
				}

				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);

				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
					let types = []
					myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}
				/************下面数据***********/
				ue.interface.TransData1 = function(data) {
					dataTemp1 = data;
					fresh();
				};

			</script>
		</body>
	</html>

	<body>
	</body>
</html>
